<template>
  <div>
    <a-form layout="inline" :model="formState">
      <a-form-item label="机构名称">
        <a-tree-select
          v-model:value="formState.comId"
          :tree-data="companyOptions"
          allow-clear
          style="width: 300px"
          tree-node-filter-prop="label"
          placeholder="请选择机构名称"
        />
      </a-form-item>
      <a-form-item label="管辖小区">
        <a-select
          v-model:value="formState.menuName"
          :options="options"
          style="width: 200px"
          placeholder="请输入管辖小区"
        ></a-select>
      </a-form-item>
      <a-form-item label="关键字">
        <a-input
          v-model:value="formState.nickName"
          placeholder="请输入关键字"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>重置</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="visible = true"
          >新增</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { getSubCompanyApi } from '#/api';
import { message } from 'ant-design-vue';
interface TreeNode {
  value: string;
  id: string;
  level: string;
  label: string;
  key?: string; // 添加 key 属性
  children?: TreeNode[];
}
const formState = reactive({
  comId: undefined,
  menuName: undefined,
  nickName: undefined,
});
const companyOptions = ref<TreeNode[]>([]);
const getSubCompany = () => {
  getSubCompanyApi().then((res: any) => {
    console.log(res);
    companyOptions.value = formatTreeData([{ ...res.data }]);
    console.log(companyOptions.value);
    // console.log();
  });
};
getSubCompany();
</script>
<style scoped></style>
